<template>
	<view class="card-container">
		<view class="up-container">
			<!-- 左边图标父盒子 -->
			<view class="left-icon-big-container" @click="changeShowFlag">
				<!-- 左边图标父盒子，用于背景色 -->
				<view class="left-icon-innner-container">
					<view class="left-icon icon iconfont icon-yanjing-zhengyan" v-if="showFlag"></view>
					<view class="left-icon icon iconfont icon-miyan" v-if="!showFlag"></view>
				</view>
			</view>
			<view class="middle-container">
				<view class="middle-up-title">净资产</view>
				<view class="middle-inner-money">{{showFlag ? indexData.netAssets : '￥****'}}</view>
			</view>
			<view class="right-icon-big-container">
				<!-- 左边图标父盒子，用于背景色 -->
				<view class="right-icon-innner-container">
					<view class="right-icon-duihuan iconfont icon-duihuan"></view>
				</view>
			</view>
		</view>
		<view class="down-container">
			<!-- 总资产左边 -->
			<view class="left-all-assets-container">
				<view class="assets-up-title">总资产</view>
				<view class="assets-up-content">{{showFlag ? indexData.totalAssets : '￥****'}}</view>
			</view>
			<!-- 总负债右边盒子 -->
			<view class="left-all-liabilities-container">
				<!-- 上边文字 -->
				<view class="liabilities-up-title">总负债</view>
				<!-- 下面金额 -->
				<view class="liabilities-up-content">{{showFlag ? indexData.totalLiabilities : '￥****'}}</view>
				<!-- <view :class="['liabilities-up-content', {'red-color': showFlag}]">{{showFlag ? indexData.totalLiabilities : '￥****'}}</view> -->
			</view>
		</view>
		<!-- 波浪效果盒子 -->
		<view class="wave-container">
			<!-- <img src="@/static/bg_wave.gif" style="width: 100%;height: 100%;background-color: white;z-index: -1;"> -->
		</view>
	</view>
</template>
<script>
	//导入draggable组件
	// import draggable from 'vuedraggable'
	export default {
		props: {
			indexData: {
				type: Object,
				default: () => {}
			},
		},
		name: 'card',
		data() {
			return {
				showFlag: true,											// 是否展示金额
			};
		},
		methods: {
			/**
			 * 切换是否展示金额
			 */
			changeShowFlag() {
				this.showFlag = !this.showFlag;
				this.$emit("changeShowFlag", this.showFlag);
			}
		},
		mounted(){
		},
	};
</script>
<style lang="scss">
	.card-container {
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;
		padding-top: 30rpx;
		box-sizing: border-box;
		background-color: $themePurpleColor;
		display: flex;
		flex-direction: column;
		color: white;
		position: relative;
		
		// 上面（包含两个图标，净资产）
		.up-container {
			width: 100%;
			height: 55%;
			display: flex;
			// 左边
			.left-icon-big-container {
				width: 20%;
				height: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				
				.left-icon-innner-container {
					width: 45%;
					height: 39%;
					background-color: $themeCircularPurpleColor;
					border-radius: 50%;
					line-height: 61.34rpx;
					text-align: center;
					.left-icon {
						font-size: 30rpx;
					}
				}
			}
			
			// 右边
			.right-icon-big-container {
				width: 20%;
				height: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				
				.right-icon-innner-container {
					width: 45%;
					height: 39%;
					background-color: $themeCircularPurpleColor;
					border-radius: 50%;
					line-height: 61.34rpx;
					text-align: center;
					.right-icon-duihuan {
						transform: rotate(-90deg);
						font-size: 30rpx;
					}
				}
			}
			
			// 中间
			.middle-container {
				width: 60%;
				height: 100%;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				padding: 10rpx 0rpx;
				
				.middle-up-title {
					width: 100%;
					height: 48%;
					text-align: center;
					margin-bottom: 20rpx;
				}
				
				.middle-inner-money {
					width: 100%;
					height: 52%;
					text-align: center;
					font-size: 59rpx;
					font-weight: bold;
					line-height: 82.44rpx;
				}
			}
		}
		
		.down-container {
			z-index: 99;
			width: 100%;
			height: 45%;
			display: flex;
			padding: 0rpx 40rpx;
			box-sizing: border-box;
				
			.left-all-assets-container {
				width: 50%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				box-sizing: border-box;
				padding: 10rpx 0rpx;
				
				.assets-up-title {
					font-size: 35rpx;
				}
				
				.assets-up-content {
					font-size: 28rpx;
				}
			}
			
			.left-all-liabilities-container {
				width: 50%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				box-sizing: border-box;
				padding: 10rpx 0rpx;
				
				.liabilities-up-title {
					font-size: 35rpx;
				}
				
				.liabilities-up-content {
					font-size: 28rpx;
				}
				
				.red-color {
					color: $typefaceRedColor;
				}
			}
		}
		
		// 波浪盒子
		.wave-container {
			width: 100%;
			height: 100rpx;
			position: absolute;
			// background-color: red;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			// 移动效果
			// animation:mymove 15s infinite;
			// -webkit-animation:mymove 15s infinite; /*Safari and Chrome*/
			
		// 移动端没有效果
		// 	.waves {
		// 		position:relative;
		// 		width: 100%;
		// 		height: 100rpx;
		// 		margin-bottom:-7px; /*Fix for safari gap*/
		// 		min-height: 100px;
		// 		max-height: 150px;
		// 		// background-color: $themeWavePurpleColor;
		// 	}
			
		// 	/* Animation */
		
		// 	.parallax > use {
		// 		animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
		// 	}
		// 	.parallax > use:nth-child(1) {
		// 		animation-delay: -2s;
		// 		animation-duration: 7s;
		// 	}
		// 	.parallax > use:nth-child(2) {
		// 		animation-delay: -3s;
		// 		animation-duration: 10s;
		// 	}
		// 	.parallax > use:nth-child(3) {
		// 		animation-delay: -4s;
		// 		animation-duration: 13s;
		// 	}
		// 	.parallax > use:nth-child(4) {
		// 		animation-delay: -5s;
		// 		animation-duration: 20s;
		// 	}
		// 	@keyframes move-forever {
		// 		0% {
		// 			transform: translate3d(-90px,0,0);
		// 		}
		// 		100% {
		// 			transform: translate3d(85px,0,0);
		// 		}
		// 	}
		// 	/*Shrinking for mobile*/
		// 	@media (max-width: 768rpx) {
		// 		.waves {
		// 			height: 100rpx;
		// 			min-height:40px;
		// 		}
		// 		.content {
		// 			height:30vh;
		// 		}
		// 		h1 {
		// 			font-size:24px;
		// 		}
		// 	}
		}
	}
	
	@keyframes mymove
	
	{
	
	    0% {left:0px;}
	
	    50%{left: 80%;}
	
	    100% {left:0px;}
	
	}
	
	 
	
	@-webkit-keyframes mymove /*Safari and Chrome*/
	
	{
	
	    0% {left:0px;}
	
	    50%{left: 80%;}
	
	    100% {left:0px;}
	
	}
</style>
